<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多模型聊天应用</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="settings-card">
                <button id="settings-toggle" class="icon-button">⚙️ 设置API</button>
                <div id="settings-content" class="hidden">
                    <div class="form-group">
                        <label for="address">选择地址</label>
                        <select id="address" class="form-control">
                            <option value="Ollama">Ollama</option>
                            <option value="LMstudio">LMstudio</option>
                            <option value="AiGitee">AiGitee</option>
                            <option value="ChatGLM">ChatGLM</option>
                            <option value="THUds">THUds</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="api-key">API Key</label>
                        <input type="password" id="api-key" class="form-control" placeholder="输入 API Key">
                    </div>
                    <div class="form-group">
                        <label for="model">选择模型</label>
                        <select id="model" class="form-control"></select>
                    </div>
                    <div class="form-group">
                        <label for="temperature">温度参数</label>
                        <input type="range" id="temperature" min="0" max="1" step="0.05" value="0.7">
                        <span id="temperature-value">0.7</span>
                    </div>
                </div>
            </div>
            <button id="new-chat" class="primary-button">🆕 新建会话</button>
            <button id="save-chat" class="secondary-button">💾 保存对话</button>
            <div class="history-card">
                <!-- <h3>📜 历史记录</h3> -->
                <ul id="history-list"></ul>
            </div>
        </div>

        <!-- 主聊天窗口 -->
        <div class="main">
            <div class="header">
                <h1>🤖 多模型聊天应用</h1>
                <p>与不同模型的 AI 聊天，搞笑幽默一些</p>
            </div>
            <div id="chat-window" class="chat-container"></div>
            <div class="input-area">
                <input type="text" id="user-input" class="form-control" placeholder="请输入你的消息">
                <button id="submit-button" class="primary-button">提交</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>